Como dar espaço no bootstrap?
espaço no bootstrap
Neste artigo será mostrado como usar padding e margin nos elementos do bootstrap em elementos como divs e grids para dar espaçamento.
Como tudo no bootstrap o espaçamento definido utilizando suas classes nativas dão suporte a responsividade. Por isso é sempre bom usar elas para não quebrar o leiaute.
Neste vou mostrar como utilizar as principais propriedades de espaço que são padding e margin e como configurar o espaço das colunas do grid bootstrap.
Como configurar os espaçamentos externos e internos dos elementos no bootstrap
Sabendo como usar a propriedade de margin e padding você já resolve a maioria dos problemas de espaço. Por exemplo com o padding pode dar espaço entre linhas e margin para separar os elementos.
Se você não sabe qual a diferença e quando usar margin ou padding veja clicando no link aqui em baixo.
Qual a diferen entre margin e padding?
Sintaxe das classes
{propriedade}{lados}-{tamanho}
Explicação:
Propriedade: é a inicial que define se trata de uma margin ou padding, m ou p respectivamente.
Lado: é a inicial do lado, top para cima, bottom para baixo, left para esquerda e right para direita, sendo t, b, l ou r respectivamente. Também pode ser usado x para horizontal ou seja esquerda e direita e y para vertical para cima e para baixo. Caso nenhum lado seja informado o valor será aplicado em todos.
Tamanho: são valores de 0 a 5 sendo o zero para remover a propriedade e os outros números seguindo uma tabela de multiplicação do $spacer, como mostrado abaixo.
1 = $spacer * 0.25;
2 = $spacer * 0.5;
3 = $spacer;
4 = $spacer * 1.5;
5 = $spacer * 3;
Ainda sobre o tamanho existe o valor auto, com a mesma finalidade do valor auto em CSS.
Exemplos:
Para criar uma margem médio em cima de um elemento é usado:
mt-3
Para criar uma interna pequena nas laterais de um elemento é usado:
px-1
Aplicando isso em um elemento ficaria algo como:
<div class="mt-3 px-1">
Esses valores são pré-definidos nas classes nativas do bootstrap, mas pode ser acrescentado outros usando o mapa Sass $spacers.
O que é Sass?
Como configurar o Sass das classes bootstrap?
Como configurar o espaçamento entre colunas da grid no bootstrap
O problema normalmente é o seguinte se quer alinhar as colunas horizontalmente, mas os elementos ficam grudados.
Para isso existe uma propriedade nos grids do bootstrap que é o offset. Não sei se essa é a definição real dele, mas ele serve como uma coluna negativa gerando um espaço igual o col, anterior ao elemento, empurrando o elemento visível para frente.
Sintaxe:
offset-{padrão de tela}-{valor}
Padrão de tela: é tamanho da tela configurado no leiaute.
valor: a quantidade de colunas do grid.
Exemplo:
Para deixar dois blocos com tamanho iguais, alinhados na lateral da tela com um espaço central vazio.
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 offset-md-2"></div>
</div>
O que é o valor auto em CSS?
Veja mais em:
Como usar o sistema de grid do bootstrap?
Leia mais em: etbootstrap.com.br/docs/4.1/u...
